easing

Objects in real life do not just start and stop instantly, and almost never move at a constant speed. If we open a drawer, we first move it quickly, and slow it down as it comes out. Drop something on the floor, and it will first accelerate downwards, and then bounce back up after hitting the floor.

The easing you choose has the power to greatly affect the way your animation communicates. Where an object goes is important, but the way it gets there is even more important. In fact, Timing for Animation is an entire this section written on just that in great detail. While it’s unlikely any of us will be drawing animations for a company like Disney, understanding how we can finely control the movement of our animations is still important.

The how of the movement is what conveys the mood, weight and other key personality and communication factors. These transitional moments of movement or change offer a great opportunity for us to communicate, even when they go by in less than a second.

Easing is the way speed is distributed across the duration of an animation. In CSS, our easing is handled with the animation-timing-function property. We have three ways to define the timing: keywords; our own custom-defined cubic Bézier curve; and steps. Steps is the odd one out here, as they have their own distinct concept which doesn’t actually do any easing. We’ll briefly discuss steps separately later in the tutorial.

Easing keywords

It's predefined keyword options in more detail first to get a better picture of what’s going on behind the scenes. Our predefined easing keywords are: ease (the default); linear; ease-in; ease-out and ease-in-out.

If we were to create a frame-by-frame diagram of a ball moving between two keyframes with linear easing, it looks like this:

 The object moves at the exact same speed the entire time while moving between keyframes; the speed is constant across the entire animation from the start to the end. This is often perceived as a very mechanical or unnatural motion because nothing in real life moves at a constant speed like this.

The movement is slower at first and then it speeds up as it approaches the end of the movement. In general, this style of easing creates the sense of gaining momentum or acceleration. The rate at which your object speeds up over the course of its movement can suggest qualities of its weight or suggest that other forces may be acting on it.

Using ease-out gives us the opposite effect. The animation starts fast and slows as it approaches the end:

Combining the concepts of ease-in and ease-out gives us ease-in-out, which will have the most speed in the middle, while starting and ending at a slower pace. The easing movement you get from the ease is a variation of ease-in-out; ease has a more drastic slowing at the end, but you can see they look quite similar. Personally, I prefer ease-in-out over ease for its more balanced motion in most cases.

Bring on the Béziers!

Custom cubic Bézier curves come to our rescue when we want more easing options to work with. Each of the keywords mentioned above can be defined as a cubic Bézier curve as well. The keywords are a bit like shortcuts to common Bézier curves. When you need more control than what’s offered by keywords, you can create your own custom cubic Bézier curve for your timing function. Now the easing options are virtually limitless!

To create the curves, we plot the progression of the animation against time and we get curves like this that represent the speed of the animation over time.

Small adjustments in the shape of the curve will influence the influnuance of our animation’s timing. Each cubic Bézier curve is defined by four values between zero and one which describe the curve to be drawn.

cubic-bezier(0.165, 0.840, 0.440, 1.000)

 They’re pretty meaningless to most of us when they’re written like that. It’s probably been quite a while since you had to break out the old graphing calculator in math class. Luckily, there are a few tools out there that we can use to come up with these numbers in a more intuitive and visual way.

Timing functions are not one-size-fits-all

After all that talk of what timing functions do, there’s one more important point about how CSS uses the timing functions we specify. For keyframe animations, timing functions are applied between keyframes. In many cases you’ll only specify one timing function per animation like so:

.someClass { animation-timing-function: cubic-bezier(0.550,
0.055, 0.675, 0.190); }

;

In this case, your cubic Bézier function would be applied between each keyframe in your animation. It would determine the style of motion between all the property changes as defined in your keyframes using that same function.

That’s not always ideal, especially with more complex animations. It’s unlikely that you really would want the exact same easing applied between all your keyframes when your goal is more complex motion. It may look odd at first, but we can change the timing function being used mid-animation within our @keyframes declaration block:

@keyframes myAnimation {
0% { opacity: 0.5; }
50% {
opacity: 0.3;
animation-timing-function: ease-in-out;
}
100% { opacity: 1; }
}

In the code above, a timing function of ease-in-out would be applied between the 50% and 100% keyframes, but the previously set timing function would be used by default between the 0% and 50% keyframes.